<template>
    <!-- 删除账单弹窗 -->
    <el-dialog title="删除账单" :model-value="visible" width="520px" :fullscreen="mobile" class="dialog-content-clear" @close="handleClose">
      <el-alert title="提示：删除后，此账单将被永久清除。" type="warning" :closable="false" />
      <el-form :model="info" label-width="120px" class="mt20">
        <el-form-item label="房源">
          {{ info.room.buildingName }}{{ info.room.name }}
        </el-form-item>
        <el-form-item label="姓名" prop="renterName">
          {{ info.renterName }}
        </el-form-item>
        <el-form-item label="实收日期" prop="payTime">
          {{ info.payTime }}
        </el-form-item>
        <el-form-item label="金额" prop="money">
          {{ info.money }}
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="danger" @click="handleOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
</template>
<script setup>
import useAppStore from '@/store/modules/app'

const emit = defineEmits()
const props = defineProps({
    visible: Boolean,
    info: {
        type: Object,
        readonly: true,
        default: () => {
            return {}
        }
    }
})
const mobile = computed(() => useAppStore().device === 'mobile')

function handleClose() {
    emit('cancel')
}
function handleOk() {
    emit('ok', props.info.billId)
}
</script>